<template>
  <div id="user">
    <Template ref="template" name="用户" :url="url" :flag="flag" :terms="terms" :props="props" :rules="rules"
      :actions="actions"></template>
  </div>
</template>

<script>
  import {
    Vue,
    Component,
    Prop
  } from "vue-property-decorator";
  import Template from '@/components/template/manage.vue';
  import {
    userName,
    password,
    name
  } from '@/static/tool/validate.js';

  @Component({
    components: {
      Template
    }
  })
  export default class User extends Vue {
    url = 'my/user'
    flag = {
      list: true,
      save: true,
      update: false,
      del: true
    }
    rules = {
      userId: [{
          required: true,
          message: '请输入用户名',
          trigger: 'blur'
        },
        {
          validator: userName,
          trigger: 'blur'
        }
      ],
      password: [{
          required: true,
          message: '请输入密码',
          trigger: 'blur'
        },
        {
          validator: password,
          trigger: 'blur'
        }
      ],
      name: [{
          required: true,
          message: '请输入用户姓名',
          trigger: 'blur'
        },
        {
          validator: name,
          trigger: 'blur'
        }
      ],
      desc: [{
          required: false,
          max: 64,
          message: '备注不得超过64位',
          trigger: 'blur'
        }
      ]
    };
    terms = [];
    props = [{
      code: 'userId',
      name: '用户名',
      readOnly: true,
      width: 180
    }, {
      code: 'password',
      name: '密码',
      tableHide: true,
      modifyHide: true
    }, {
      code: 'name',
      name: '姓名',
      width: 120
    }, {
      code: 'desc',
      name: '备注',
      width: 180
    }];
    actions = [];
    created() {} //生命周期 - 创建完成（可以访问当前this实例）
    mounted() {} //生命周期 - 挂载完成（可以访问DOM元素）
    beforeCreate() {} //生命周期 - 创建之前
    beforeMount() {} //生命周期 - 挂载之前
    beforeUpdate() {} //生命周期 - 更新之前
    updated() {} //生命周期 - 更新之后
    beforeDestroy() {} //生命周期 - 销毁之前
    destroyed() {} //生命周期 - 销毁完成
    activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
  }
</script>
<style scoped>
  #user {
    padding: 0px 100px;
  }
</style>
